<template>
  <div>
    <Nav></Nav>
    <HeadNav></HeadNav>

    <div class="box book_box">
      <div class="book_img">
        <img
          v-image-preview
          v-loading="loading1"
          referrer="no-referrer|origin|unsafe-url"
          style="width: 200px; height: 300px;  border-radius:10px ;"
          :src="this.Book.img"
          fit="fill"
        />
      </div>
      <div class="book_buy">
        <div class="book_name">{{ this.Book.title }}</div>
        <div class="book_content book_buy_content">
          <div class="book_list_content">作者: {{ this.Book.author }}</div>
          <div class="book_list_content">ISBN: {{ this.Book.isbn }}</div>
          <!-- <div class="score">
             <span>豆瓣评分：</span> <span>
              <el-rate
              v-model="this.value"
              show-score
              disabled
              show-text
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
              </span> 
          </div> -->

          <div id="interest_sectl" class="">
            <div
              v-loading="loading1"
              class="rating_wrap clearbox"
              rel="v:rating"
            >
              <div class="rating_logo">豆瓣评分</div>
              <div class="rating_self clearfix" typeof="v:Rating">
                <strong class="ll rating_num " property="v:average">
                  {{ this.value_1 * 2 }}</strong
                >
                <el-rate v-model="value_1" disabled text-color="#ff9900">
                </el-rate>
                <span property="v:best" content="10.0"></span>
                <div class="rating_right ">
                  <div class="ll bigstar45"></div>
                  <div class="rating_sum">
                    <span class="">
                      <a href="comments" class="rating_people"
                        ><span property="v:votes">{{ this.pf_count }}</span
                        >人评价</a
                      >
                    </span>
                  </div>
                </div>
              </div>

              <span class="stars5 starstop" title="力荐">
                5星
              </span>

              <div class="power" :style="{ width: pf_nav[0] + '%' }"></div>

              <span class="rating_per">{{ this.pf[0] }}</span>
              <br />

              <span class="stars4 starstop" title="推荐">
                4星
              </span>

              <div class="power" :style="{ width: pf_nav[1] + '%' }"></div>

              <span class="rating_per">{{ this.pf[1] }}</span>
              <br />

              <span class="stars3 starstop" title="还行">
                3星
              </span>

              <div class="power" :style="{ width: pf_nav[2] + '%' }"></div>

              <span class="rating_per">{{ this.pf[2] }}</span>
              <br />

              <span class="stars2 starstop" title="较差">
                2星
              </span>

              <div class="power" :style="{ width: pf_nav[3] + '%' }"></div>

              <span class="rating_per">{{ this.pf[3] }}</span>
              <br />

              <span class="stars1 starstop" title="很差">
                1星
              </span>

              <div class="power" :style="{ width: pf_nav[4] + '%' }"></div>

              <span class="rating_per">{{ this.pf[4] }}</span>
              <br />
            </div>
          </div>

          <div class="book_list_content">出版社: {{ this.Book.bookPress }}</div>
          <div class="book_list_content">
            出版时间: {{ this.Book.createTime }}
          </div>
        </div>
        <div class="book_content book_buy_price">
          <div class="book_buy_info">
            <span class="labelSpan">售价</span>
            <span class="labelPrice">￥{{ this.Book.price }}</span>
          </div>
          <div class="book_buy_info">
            <span class="labelSpan">市场价</span>
            <s>￥{{ this.Book.inventory }}</s>
          </div>
        </div>
        <div class="book_content">
          <span class="labelSpan">运费</span>
          ￥6.00
        </div>
        <div class="book_content">
          <span class="labelSpan">上架时间</span>
          {{ this.Book.createTime }}
        </div>
        <div class="book_content">
          <span class="labelSpan">库存</span>
          {{ this.num }}件
        </div>
        <div class="book_content">
          <el-button
            class="plainBtn"
            :disabled="Book.status == '0' ? true : false"
            @click.native="pay"
            plain
            >{{ this.Book.status == "0" ? "已下架" : "立即购买" }}</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-shopping-cart-2"
            class="cartBtn"
            @click="gwc"
            v-if="Book.status == '1'"
            >加入购物车</el-button
          >
        </div>
      </div>
    </div>
    <div class="box">
      <div class="book_sort">
        <!-- <div class="tab">
          <div class="tab_head">分类</div>
          <div v-for="sort in fenlei" :key="sort.categoriesId" class="tab_list">
            <p>{{ sort.classname }}</p>
          </div>
        </div> -->
      </div>
      <div class="book_info">
        <el-tabs value="first" type="card">
          <el-tab-pane label="商品详情" name="first">
            <div class="product">
              <div class="markdown-body">
                <h2>
                  <span>内容简介</span>
                  &nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
                </h2>

                <div class="indent" id="link-report">
                  <span class="short">
                    <div class="intro" v-html="this.Book.describe"></div>
                  </span>
                  <span class="all hidden"> </span>
                </div>

                <h2>
                  <span>作者简介</span>
                  &nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
                </h2>

                <div class="indent ">
                  <div class="">
                    <div class="intro" v-html="this.Book.authorIntro"></div>
                  </div>
                </div>
                <div class="mod-hd">
                  <h2>
                    <span>短评</span>
                    &nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·&nbsp;·
                    <span class="pl"
                      >&nbsp;(
                      <a
                        href="https://book.douban.com/subject/35578829/comments/"
                        >{{ this.pl.num }}
                      </a>
                      )
                    </span>
                  </h2>
                </div>
                <div id="comment-list-wrapper" class="indent">
                  <div class="comment-list new_score show" id="new_score">
                    <ul>
                      <li
                        v-for="item in this.pl"
                        :key="item.index"
                        class="comment-item"
                      >
                        <div class="comment">
                          <h3>
                            <span class="comment-info">
                              <a
                                href="https://www.douban.com/people/name_hu/"
                                >{{ item.name }}</a
                              >
                              <el-rate
                                :value="Number(item.pj)"
                                disabled
                                style="display: inline-block;line-height: 13px;"
                                text-color="#ff9900"
                              >
                              </el-rate>

                              <span class="comment-time">{{ item.time }}</span>
                            </span>
                          </h3>
                          <p class="comment-content">
                            <span class="short">{{ item.neirong_short }}</span>
                          </p>
                        </div>
                        <el-divider></el-divider>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="店铺评价" name="second"> </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../com/components/Common/Nav";
import HeadNav from "../../com/components/Common/HeadNav";
import axios from "axios";

export default {
  components: { Nav, HeadNav },

  data() {
    return {
      pl_num: "",
      pl: {},
      loading1: "",
      pf: [],
      pf_nav: [],
      pf_count: "",
      ISBN: "-",
      bookId: "",
      Book: {},
      fenlei: [],
      loading: "",
      num: "",
      loading1: false,
      value_1: 0,
    };
  },
  methods: {
    //立即购买
    pay() {
      localStorage.setItem("order_list", JSON.stringify(this.Book));

      this.$router.push({ path: "/dingdan_book", params: { userId: "123" } });
    },
    format(percentage) {
      return `5星${percentage}%`;
    },
    //爬取豆瓣图书数据
    //  http://book.douban.com/subject/35611194/

    getdouban() {
      var params = new URLSearchParams();
      params.append("stm", 1634724296461);
      axios
        .get("https://m.douban.com/rexxar/api/v2/gallery/subject_feed", {
          params: {
            start: 0,
            count: 4,
            subject_id: "27614904",
            ck: null,
          },
        })
        .then((res) => {});
    },

    open2(item) {
      //请求成功提示
      this.$message({
        message: item,
        type: "success",
      });
    },
    open4() {
      //请求失败提示
      this.$message.error("您没登录请登录");
    },
    //修改分数

    getbook() {
      const token = localStorage.getItem("token");
      this.loading.close();

      axios
        .get("/fl-searchBook/searchBookByISBN", {
          //请求图书详情
          params: {
            ISBN: this.ISBN,
          },
        })
        .then((res) => {
          this.Book = res.data.data;
          this.bookId = res.data.data.bookId;
          this.num = res.data.data.inventory;
          this.value_1 = res.data.data.doubanScore / 20;
          this.loading.close();
          this.loading = false;
          this.good_fenlei();
          this.loading1 = false;
          this.open2(res.data.msg);
          this.get(res.data.data.douban); //爬取豆瓣评论
          this.addHistory()
        })
        .catch((error) => {
          this.open4();
        });
    },

    async good_fenlei() {
      await axios
        .get("/fl-categories/getAllCategories", {})
        .then((res) => {
          this.fenlei = res.data.data;
        })
        .catch((err) => {});
    },
    openFullScreen2() {
      //加载
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    gwc() {
      //加入购物车
      const token = localStorage.getItem("token");
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));

      if (!token) {
        this.open4();
        this.loading.close();
      } else {
        var params = new URLSearchParams();
        params.append("username", this.userInfo.username);
        params.append("count", "1");
        params.append("bookId", this.bookId);
        axios
          .post("/fl-carts/addBookToCarts", params, {
            headers: {
              //  ' Access-control-expose-headers':'authorization',
              "Content-Type": "application/x-www-form-urlencoded",
              Authorization: token,
            },
          })
          .then((res) => {
            this.open2(res.data.msg);
          })
          .catch((error) => {
            this.open4(error);
          });
      }
    },
    get(id) {
      //爬取豆瓣评论
      this.pf_nav = [];
      this.loading1 = true;

      axios
        .get("https://sch.flya.top/index", {
          params: {
            id,
          },
        })
        .then((res) => {
          this.pf = res.data[0].rating_per;
          this.pl = res.data[0].section;
          this.pl.num = res.data[0].section_num;
          res.data[0].section.forEach((element, index) => {
            element.index = index;
          });

          for (let item of this.pf) {
            let n = parseFloat(item) / 2;
            this.pf_nav.push(n);
          }
          this.pf_count = res.data[0].pj_count;
          this.loading1 = false;
          this.$message({
            message: "爬取豆瓣评论成功",
            type: "success",
          });
        });
    },
    //添加游览记录
    addHistory() {
      const token = localStorage.getItem("token");
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      //获取当前时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      //格式化时间
      var now =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minute < 10 ? "0" + minute : minute) +
        ":" +
        (second < 10 ? "0" + second : second);
     
      console.log(now);
      if (!token) {
        this.open4();
        this.loading.close();
      } else {
        let item = {
          bookId: this.bookId,
          createTime: now,
          id: "1",
          imgUrl: this.Book.img,
          memberId: this.userInfo.userId,
          price: this.Book.price,
          title:  this.Book.title,
        };
        console.log(item)
       
        axios
          .post("/member/readHistory/create", item)
          .then((res) => {
            console.log(res)
            // this.open2(res.data.msg);
          })
          .catch((error) => {
            this.open4(error);
          });
      }
    },
  },
  created() {
    this.openFullScreen2();
    this.ISBN = this.$route.query.id; //传过来的ISBN
    this.getbook();
  },
  mounted() {
    layui.element.render();
  },
};
</script>

<style>
.el-rate__icon {
  margin-right: -4px;
}
.comment-list li {
  float: none;
}
#comments-section .comment-list.show {
  display: block;
}
#comments-section .comment-list {
  padding-top: 0;
}
#comments-section .comment-item {
  width: 100%;
  padding: 14px 0;
  position: relative;
  margin: 0;
  padding: 20px 0 25px;
  overflow: hidden;
  font-size: 13px;
  padding-right: 30px;
}
#comments-section .comment-item .comment {
  overflow: hidden;
  line-height: 1.5;
  color: #494949;
  *zoom: 1;
  font-size: 13px;
  word-wrap: break-word;
}
#comments-section .comment-item .comment-time {
  color: #aaa;
}
.comment-item {
  margin-bottom: 16px;
  font-size: 12px;
  word-break: break-word;
}
.comment-item h3 {
  background: none;
  font-size: 13px;
  height: auto;
  margin: 0;
  padding: 0;
  color: #494949;
  margin-bottom: 5px;
  *zoom: 1;
  line-height: 1.7em;
}
.comment-info a {
  color: #3377aa;
}
.comment-content {
  color: #666;
  line-height: 1.5;
}
h2 {
  color: #007722;
}
.mod-hd .pl {
  font: 12px Arial, Helvetica, sans-serif;
  line-height: 150%;
  color: #3377aa;
}

.content {
  background-color: #ffffff;
}
.box {
  margin: 10px auto;
  width: 1240px;
}
.book_box {
  height: 500px;
}
.book_img {
  margin: 10px;
  width: 300px;
  height: 480px;
  float: left;
  left: 16%;
  top: 20%;

  position: relative;
}
.book_buy {
  margin: 10px;
  width: 750px;
  height: 480px;
  float: right;
  padding: 1px;
}
.book_buy_content {
  border: 1px #f3f0e9 solid;
  padding: 5px;
  position: relative;
}
.book_content {
  margin: 10px auto;
  width: 740px;
  max-height: 120px;
  line-height: 35px;
}

.book_name {
  margin: 10px auto;
  width: 740px;
  line-height: 35px;
  font-size: 25px;

  overflow: hidden;
}
.score {
  position: absolute;
  right: 10%;
  top: 10%;
}
.book_list_content1 {
  width: 32%;
  display: inline-block;
  height: 20px;
  overflow: hidden;
  line-height: 20px;
  font-size: 15px;
}
.book_buy_info {
  width: 100%;
  line-height: 40px;
  font-size: 15px;
}
.book_buy_price {
  background-color: #f3f0e9;
  padding: 5px;
}
.labelSpan {
  color: #999;
}
.labelPrice {
  color: #9d232c;
  font-size: 17px;
}
.plainBtn {
  width: 150px;
  color: #9d232c;
  background-color: #f3f0e9;
  border: 1px #f3f0e9 solid;
}
.plainBtn:hover {
  background-color: white;
  color: #9d232c;
  border: 1px #b2bac2 solid;
}
.cartBtn {
  width: 150px;
  background-color: #9d232c;
  border: 1px #9d232c solid;
}
.cartBtn:hover {
  background-color: #f52b21;
}

.book_sort {
  margin: 10px 10px;
  width: 200px;
  /*height: 780px;*/
  float: left;
  position: absolute;
  border-right: 1px #f3f0e9 solid;
}

.book_info {
  margin: 10px 10px;
  width: 1080px;
  /*height: 780px;*/
  float: right;
  background-color: #f7f7f6;
}
.tab {
  width: 100%;
  /*height: 420px;*/
}
.tab_head {
  padding-left: 5px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #f3f0e9;
  margin: 1px 0px;
}
.tab_list {
  padding-left: 5px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  margin: 1px 0px;
}
.tab_list:hover {
  background-color: #a0a9b1;
}
.product {
  width: 100%;
  padding: 0px 15px;
}
.evaluation {
  width: 100%;
  height: 2500px;
}

#interest_sectl {
  float: left;
  width: 155px;
  margin: 2px 0 0 0;
  padding: 0 0 0 15px;
  border-left: 1px solid #eaeaea;
  color: #9b9b9b;
  position: absolute;
  right: 10%;
  top: 3%;
  height: 110px;
  width: 25%;
}

#interest_sectl .rating_wrap {
  padding-bottom: 15px;
  font-size: 12px;
  line-height: 14px;
}

#interest_sectl .rating_wrap .rating_logo {
  line-height: 0.6;
}

#interest_sectl .rating_self {
  padding: 0;
  line-height: 1.5;
}

#interest_sectl .rating_self:before,
#interest_sectl .rating_self:after {
  content: "";
  display: block;
  clear: both;
}

#interest_sectl .rating_self .rating_sum {
  clear: both;
}

#interest_sectl .rating_num {
  color: #494949;
  padding: 0;
  min-width: 30%;
  font-size: 28px;
  float: left;
}

#interest_sectl .rating_right {
  float: left;
  padding: 0px 0 9px 3px;
}

#interest_sectl .rating_right.not_showed {
  padding: 10px 0;
}

#interest_sectl .power {
  height: 10px;
  float: left;
  margin: 1px 4px;
  background: #ffd596 none repeat scroll 0 0;
}

#interest_sectl .power.color_gray {
  background: #ccc;
}

#interest_sectl .rating_per {
  font-size: 11px;
}

#interest_sectl .rating_betterthan {
  position: relative;
  padding: 15px 0;
  border-top: 1px solid #eaeaea;
  color: #9b9b9b;
  margin: 0;
}

#link-report .report {
  text-align: right;
  font-size: 12px;
  visibility: hidden;
}
#link-report .report a {
  color: #bbb;
}
#link-report .report a:hover {
  color: #fff;
  background-color: #bbb;
}
.intro {
  padding-right: 30px;
  color: #666;
}
</style>
